<div class="container-fluid">
  <div class="row">

    <div class="col-sm-2">
      <%= render "shared/sidenav" %>
    </div>

    <div class="col-sm-10">

      <div class="panel panel-primary filterable">
        <div class="panel-heading">
          <h3 class="panel-title">我的课表</h3>
        </div>

        <div class="panel-body" style="min-height: 0px">
          <table class="table table-striped table-hover">
            <thead>
            <td></td>
            <td>星期一</td>
            <td>星期二</td>
            <td>星期三</td>
            <td>星期四</td>
            <td>星期五</td>
            <td>星期六</td>
            <td>星期日</td>
            </thead>
            <tbody>
              <% (0...@course_time_table.length).each do |i| %>
                <tr>
                  <td><%= i+1 %></td>
                  <% (0...@course_time_table[i].length).each do |j| %>
                    <% if  @course_time_table[i][j][0]!=''  %>
                      <% if  @course_time_table[i][j][0].include? "_open"  %>
  
                        <td class="warning", class='row<%= i+1 %> col<%=j+1%>'><a href="#" data-toggle="popover" data-rights='<%= @course_time_table[i][j][0].sub("_open", "") %>' data-weeks='<%= @course_time_table[i][j][1] %>' data-rooms='<%= @course_time_table[i][j][2] %>' rel="drevil"><%= @course_time_table[i][j][0].sub("_open", "") %></a><span class="label label-info pull-right">旁听</span></td>
  
                        <% else %>
                        <td class="success", class='row<%= i+1 %> col<%=j+1%>'><a href="#" data-toggle="popover" data-rights='<%= @course_time_table[i][j][0] %>' data-weeks='<%= @course_time_table[i][j][1] %>' data-rooms='<%= @course_time_table[i][j][2] %>' rel="drevil"><%= @course_time_table[i][j][0] %></a>
                        </td>
                      <% end %>
                    <%else %>
                      <td class='row<%= i+1 %> col<%=j+1%>'><%= @course_time_table[i][j][0] %></td>
                    <%end %>
                  <% end %>
                </tr>
              <% end %>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
    $(function(){
        $("[rel=drevil]").popover({
            trigger:'manual',
            placement : 'top',
            trigger: 'hover',
            container: 'body',
            title: function() {
              var data = $(this).data('rights');
              return data;
            },
            html: 'true',
            content :function() {
                var course_time = $(this).data('weeks');
                var course_week = $(this).data('rooms');
                return course_time + " | " + course_week;
            },
            animation: false
        }).on("mouseenter", function () {
            var _this = this;
            $(this).popover("show");
            $(this).siblings(".popover").on("mouseleave", function () {
               $(_this).popover('hide');
            });
        }).on("mouseleave", function () {
            var _this = this;
            setTimeout(function () {
                if (!$(".popover:hover").length) {
                    $(_this).popover("hide")
                }
            }, 100);
        });
    });
</script>